import React, { useState, useEffect } from 'react';
import { Link, Navigate, useLocation } from 'react-router-dom';
import { HomeOutlined, AudioOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import './index.css';
import './chartdemo2.css';
import { Layout, Menu, Breadcrumb, Button, Space, Checkbox, Table, Input } from 'antd';
import axios from 'axios';
import { withRouter } from './withRouter'



function Chartdemo2 (props) {
  const { state } = useLocation();
  const { Search } = Input;
  const { Header, Content, Footer } = Layout;
  const CheckboxGroup = Checkbox.Group;
  const plainoptions = ['史前','夏','商','周','春秋·战国','秦·汉','三国·晋·南北朝','隋·唐','五代十国','宋','金','元','明','清'];
  const museumoptions = ['故宫博物院','河北博物馆','安徽博物馆','上海博物馆','西安博物馆'];
  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: '#1890ff',
      }}
    />
  );
  const data_checkbox_time = []
  const [checkbox_time, setCheckboxTime] = useState(data_checkbox_time)
  const data_checkbox_museum = []
  const [checkbox_museum, setCheckboxMuseum] = useState(data_checkbox_museum)
  const data_dataSource = []
  const [dataSource, setDataSource] = useState(data_dataSource)
  const value = ""
  const [enterValue, setValue] = useState(value)
  const data_keywords = []
  const [keywords, setKeywords] = useState(data_keywords)
  const columns = [
          { title: '名称', dataIndex: 'name', width: 200, align: 'center'},
          { title: '朝代', dataIndex: 'dynasty', width: 200, align: 'center' },
          { title: '博物馆', dataIndex: 'museum', width: 200, align: 'center' },
          // { title: '简介', dataIndex: 'info', width: 200, align: 'center' },
          { title: '', dataIndex: 'check', width: 200, align: 'center', render: (_, record) => (
            <Space size="middle"><Link to={"/primary_search/outcome"}
            state={{img: record.url, name: record.name, description: record.info, dynasty: record.dynasty, keywords: keywords,
            checkbox_time: checkbox_time, checkbox_museum: checkbox_museum, three_keys: record.keys}} >查看</Link></Space>
          )},
        ]
  useEffect(()=>{
      document.title = "高级搜索";
      if(props.location.state){
        if(props.location.state.keys){
          var namearr = [];
          namearr.push(props.location.state.keys)
          axios({
            //请求类型
            method: 'post',
            //URL
            url:'http://localhost:5000/search',
          //设置请求体(即传输的数据)
            data:{
              dynasty: checkbox_time,
              museum: checkbox_museum,
              name: namearr
            }
          })
          .then(response => {
              console.log(response.data.hits)
              var temp = []
              for(var i=0;i<response.data.hits.hits.length;i++){
                var obj = {}
                obj['name'] = response.data.hits.hits[i]._source.name
                obj['dynasty'] = response.data.hits.hits[i]._source.dynasty
                obj['museum'] = response.data.hits.hits[i]._source.museum
                obj['info'] = response.data.hits.hits[i]._source.description
                obj['url'] = response.data.hits.hits[i]._source.URL
                obj['keys'] = response.data.hits.hits[i]._source.keywords
                temp.push(obj)
              }
              setDataSource(temp)
              setValue(props.location.state.keys)
          }).catch(err=>{
            alert('查询失败，请检查网络000')
          })
        }
        else if(props.location.state.checkbox_museum || props.location.state.keywords || props.location.state.checkbox_time){
          console.log(props.location.state.checkbox_time)
          console.log(props.location.state.checkbox_museum)
          console.log(props.location.state.keywords)
          var tempkeys = []
          var tempentervalue = ""
          for(var i=0;i<props.location.state.keywords.length;i++){
            if(props.location.state.keywords[i]!=""){
              tempkeys.push(props.location.state.keywords[i])
              tempentervalue += props.location.state.keywords[i]
              if(i!=props.location.state.keywords.length-1){
                tempentervalue += " "
              }
            }
          }
          setValue(tempentervalue)
          setCheckboxTime(props.location.state.checkbox_time)
          setCheckboxMuseum(props.location.state.checkbox_museum)
          axios({
            //请求类型
            method: 'post',
            //URL
            url:'http://localhost:5000/search',
          //设置请求体(即传输的数据)
            data:{
              dynasty: props.location.state.checkbox_time,
              museum: props.location.state.checkbox_museum,
              name: tempkeys
            }
          })
          .then(response => {
              console.log(response.data.hits)
              var temp = []
              for(var i=0;i<response.data.hits.hits.length;i++){
                var obj = {}
                obj['name'] = response.data.hits.hits[i]._source.name
                obj['dynasty'] = response.data.hits.hits[i]._source.dynasty
                obj['museum'] = response.data.hits.hits[i]._source.museum
                obj['info'] = response.data.hits.hits[i]._source.description
                obj['url'] = response.data.hits.hits[i]._source.URL
                obj['keys'] = response.data.hits.hits[i]._source.keywords
                temp.push(obj)
              }
              setDataSource(temp)
          }).catch(err=>{
            alert('查询失败，请检查网络123')
          })
        }
      }
  }, [])

  const getValue = (e) => {
    setValue(e.target.value);
  }

  const checkbox_time_change = (val) => {
    console.log(val);
    let senddata = val;
    setCheckboxTime(senddata);
  }

  const checkbox_museum_change = (val) => {
    console.log(val);
    setCheckboxMuseum(val);
  }

  const mysearch = () => {
    console.log(checkbox_time);
    console.log(checkbox_museum);
    setKeywords(enterValue.split(/[\s\n]/))
    console.log(keywords)
    axios({
      //请求类型
      method: 'post',
      //URL
      url:'http://localhost:5000/search',
    //设置请求体(即传输的数据)
      data:{
        dynasty: checkbox_time,
        museum: checkbox_museum,
        name: keywords
      }
    })
    .then(response => {
        console.log(response.data.hits)
        var temp = []
        for(var i=0;i<response.data.hits.hits.length;i++){
          var obj = {}
          obj['name'] = response.data.hits.hits[i]._source.name
          obj['dynasty'] = response.data.hits.hits[i]._source.dynasty
          obj['museum'] = response.data.hits.hits[i]._source.museum
          obj['info'] = response.data.hits.hits[i]._source.description
          obj['url'] = response.data.hits.hits[i]._source.URL
          obj['keys'] = response.data.hits.hits[i]._source.keywords
          temp.push(obj)
        }
        setDataSource(temp)
    }).catch(err=>{
      alert('查询失败，请检查网络aaa')
    })
  }
  
  let check_time = []
  if(state){
    check_time = state.checkbox_time
  }

  let check_museum = []
  if(state){
    check_museum = state.checkbox_museum
  }

  return(     
    <Layout className="layout">
      <div className='head'></div>
        <Header className='myheader'>
            <Breadcrumb className='bread2'>
              <Breadcrumb.Item><HomeOutlined style={{
                width: '20px',
                height: '40px'
              }}/><a href='/primary_search/primary'>主页</a></Breadcrumb.Item>
              <Breadcrumb.Item><a href='/primary_search/advance'>搜索引擎</a></Breadcrumb.Item>
            </Breadcrumb>

        </Header>
        <Content
            style={{
            padding: '0 50px',
            height: '80vh',
            backgroundColor: 'white'
            }}
        >
        <div className="site-layout-content">
          <div className='inner_header'>
            <div className='header_time'>
              <style jsx>{`
                p{
                  width: 35px
                }
              `}
              </style>
              <p className='ti'>朝代：</p><br/>
              <CheckboxGroup className='mycheck' defaultValue={check_time} options={plainoptions} onChange={checkbox_time_change}></CheckboxGroup>
            </div>
            <div className='header_time'>
            <style jsx>{`
                p{
                  width: 60px
                }
              `}
              </style>
              <p className='ti'>博物馆： </p>
              <CheckboxGroup className='mycheck' defaultValue={check_museum} options={museumoptions} onChange={checkbox_museum_change}></CheckboxGroup>
            </div>
              <div className='header_search'>
              <Search
                id='se'
                enterButton="搜索"
                value={enterValue}
                size="large"
                suffix={suffix}
                onChange={getValue}
                onSearch={mysearch}
              />
              </div>
          </div>
          <br/>
        </div>
        <Space style={{
          marginBottom: '100px',
          width: '90vw'
        }}>
          <Table style={{
              width: '90vw'
          }} dataSource={dataSource} columns={columns} />
        </Space>
      </Content>
    <div className='foot'></div>
  </Layout>
  )
}

export default withRouter(Chartdemo2);